import { useSimulationStore } from '@app-nextmesh/store/simulation';
import { useEffect, useState } from 'react';
import NativeSelect from './NativeSelect';
import { ISelectProps } from './types';

export default function BoundarySetSelect(props: ISelectProps) {
  const boundarySets = useSimulationStore((state) => state.boundarySets);
  const [value, setValue] = useState<string[]>([]);
  useEffect(() => {
    setValue([]);
    const values = props.value as string[];
    setValue(values);
  }, [props.value]);
  const handleInputChange = (value: string | number | string[]) => {
    const values = value as string[];
    props.onChange(values);
    setValue(values);
  };

  const boundaryType = props.type.split('-');
  const options =
    boundarySets
      ?.filter((item) =>
        boundaryType[1] === 'Load'
          ? item.ConditionType !== 'DisplacementConstraint'
          : item.ConditionType === boundaryType[1],
      )
      ?.map((item) => {
        return { label: item.name, value: item.name };
      }) ?? [];

  return (
    <NativeSelect
      value={value}
      onChange={(value) => handleInputChange(value)}
      options={options}
      disabled={props.disabled}
      multiple={true}
    />
  );
}
